<template>
    <el-container class="app-layout-container" style="height: 100vh">
        <el-aside width="250px">
            <el-header style="background: none; ">
                <div style="height: 100%; display: flex; align-items: center;">
                    Platform Manage Master
                </div>
            </el-header>
            <el-scrollbar style="height: calc(100% - 132px); padding-top: 12px;">
                <el-menu @select="handleSelect" :default-active="activeIndex"
                    style="--el-menu-item-height: 42px; --el-menu-base-level-padding: 0; ">

                    <el-menu-item v-for="(item, index) in menuData" :index="item.index">
                        <div class="el-menu-item-layer">
                            <!-- <template #icon>
                  <component :is="item.icon"/>
                </template> -->
                            <el-icon>
                                <component :is="item.icon" />
                            </el-icon>
                            <span>{{ item.text }}</span>
                        </div>
                    </el-menu-item>


                    <!-- <el-menu-item index="0">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Orange />
                </el-icon>
                <span>主机管理</span>
              </div>
            </el-menu-item>
            <el-menu-item index="1">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Aim />
                </el-icon>
                <span>数据库管理</span>
              </div>
            </el-menu-item>
            <el-menu-item index="2">
              <div class="el-menu-item-layer">
                <el-icon><icon-menu /></el-icon>
                <span>安装</span>
              </div>
            </el-menu-item>
            <el-menu-item index="3">
              <div class="el-menu-item-layer">
                <el-icon><icon-menu /></el-icon>
                <span>安装与配置</span>
              </div>
            </el-menu-item>
            <el-menu-item index="4">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Setting />
                </el-icon>
                <span>服务管理</span>
              </div>
            </el-menu-item> -->

                    <!--单机模式\双主模式\主从模式-->
                    <!-- <el-menu-item index="32">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Aim />
                </el-icon>
  
                <span>Install Database</span>  
              </div>
            </el-menu-item> -->
                    <!-- <el-menu-item index="33">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Aim />
                </el-icon>
  
                <span>安装Zookeeper</span>
              </div>
            </el-menu-item> -->

                    <!-- <el-menu-item index="5">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Download />
                </el-icon>
                <span>升级与回退</span>
              </div>
            </el-menu-item> -->
                    <!-- <el-menu-item index="7">
              <div class="el-menu-item-layer">
                <el-icon>
                  <Delete />
                </el-icon>
                <span>卸载</span>
              </div>
            </el-menu-item> -->

                </el-menu>
            </el-scrollbar>
            <el-footer>
                <el-text class="mx-1" size="small"
                    style="display: inline-flex; align-items: center; height: 100%; text-align: center;"><el-icon
                        style="margin-right: 5px;">
                        <InfoFilled />
                    </el-icon> Ver1.0.6, build
                    d8a9324</el-text>

            </el-footer>
        </el-aside>
        <div
            style="background-color: rgb(230, 230, 229); border-left: 1px solid rgb(232, 232, 231); border-right: 1px solid rgb(217, 217, 216);">
        </div>
        <el-container>
            <el-header style="font-size: 12px; ">
                <el-row :gutter="20" style="height: 100%;">
                    <el-col :span="12">

                        <div style="height: 100%; display: flex; align-items: center;">
                            <el-text class="mx-1" size="large"> <el-icon>
                                    <component :is="headerIcon" />
                                </el-icon> {{ headerTitle }}</el-text>
                        </div>
                    </el-col>

                    <el-col :span="12" style="text-align: right;">
                        <div class="toolbar">
                            <el-dropdown>
                                <el-icon style="margin-right: 8px; margin-top: 1px">
                                    <setting />
                                </el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="logout">退出</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <span>{{ login_username }}</span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>

            <el-main>
                <el-scrollbar style="padding: 12px; height: calc(100% - 24px);">
                    <component :is="activeComponent"></component>
                </el-scrollbar>
                <!-- <el-scrollbar v-else-if="activeIndex == '1'" style="padding: 12px;"> -->
                <!-- <InstallList/> -->
                <!-- <HostList /> -->
                <!-- <Install/> -->
                <!-- </el-scrollbar> -->
            </el-main>
        </el-container>
    </el-container>
</template>

<style scoped></style>
<script lang="ts" setup>
import { ref, shallowRef, markRaw } from 'vue'
import { Menu as IconMenu, Orange, Setting, Delete, Download, Upload, Aim, InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import InstallList from './InstallList.vue';
import HostList from './HostList.vue';
import Installer from './Installer.vue';
import ServiceList from './ServiceList.vue';
import axios from 'axios'

const router = useRouter()

const login_username = ref(localStorage.getItem("login_username") || '');

let menuData = [
    {
        index: "0",
        icon: IconMenu,
        text: '主机管理',
    }, {
        index: "1",
        icon: Orange,
        text: '数据库管理',
    }, {
        index: "2",
        icon: Setting,
        text: '安装与配置',
    }, {
        index: "3",
        icon: Aim,
        text: '服务管理',
    }, {
        index: "4",
        icon: Download,
        text: '升级与回退',
    },
]

const activeIndex = ref(menuData[0].index);
let activeComponent = shallowRef(HostList);
let headerTitle = shallowRef(menuData[0].text);
let headerIcon = shallowRef(menuData[0].icon);

const handleSelect = (key: string, keyPath: string[]) => {
    // console.info(key);
    // console.info(keyPath);
    switch (key) {
        case '0':
            activeComponent.value = HostList;
            break;
        case '2':
            activeComponent.value = Installer;
            break;
        case '3':
            activeComponent.value = InstallList;
            break;
        case '4':
            activeComponent.value = ServiceList;
            break;
        default:
            activeComponent.value = HostList;
            break;
    }

    let index = parseInt(key);
    headerTitle.value = menuData[index].text;
    headerIcon.value = menuData[index].icon;
}

const logout = () => {
    let ins = axios.create({
        headers: {
            'Content-Type': 'application/json',
            'Authorization': sessionStorage.getItem("access_token"),
            'RefreshToken': sessionStorage.getItem("refresh_token")
        }
    });
    ins.post("/logout").then((rsp) => {
        sessionStorage.removeItem("access_token");
        router.push({ name: 'login' })
    }).catch(error => {
        console.error(error);
    });
    // window.location.reload();
}

</script>

<style scoped>
.app-layout-container .el-header {
    position: relative;
    /* background-color: var(--el-color-primary-light-7); */
    color: var(--el-text-color-primary);
    border-bottom: 1px solid #dcdfe6;
}

.app-layout-container .el-aside {
    color: var(--el-text-color-primary);
    background-color: rgb(234, 234, 233);
    border-right: 1px solid rgb(232, 232, 231);
}

.app-layout-container .el-menu {
    border-right: none;
}

.el-menu {
    --el-menu-bg-color: rgb(234, 234, 233);
}

.el-menu-item {
    margin: 3px 0;
}

.el-menu-item.is-active>.el-menu-item-layer {
    background-color: rgba(64, 158, 255, 0.1);
}

.el-menu-item>.el-menu-item-layer {
    margin: 0 11px 0 12px;
    width: 100%;
    text-align: left;
    padding: 0 10px;
    border-radius: 6px;
    user-select: none;
}

.el-menu-item:hover {
    background: none;
}

.el-menu-item:hover>.el-menu-item-layer {
    /* background-color: var(--el-menu-hover-bg-color); */
    color: var(--el-menu-active-color);
}


.app-layout-container .el-main {
    padding: 0;

}

.app-layout-container .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>